Style Guide Localization
Print this Page
CSS: lang() Selector - Styling using Language Attributes

Presentation styles are commonly used to control changes in fonts, font sizes, line heights and text direction on the web page. When the website is localizaed into multilingual, the best way to style content by language is to use the :lang Selecter in your CSS Style Sheet, for example, for example, the font style and the text direction

Associate CSS Styles with Font Text in a multilingual HTML
Language CSS Definition HTML Code Text Output
English p.sample:lang(en) {
font-family: arial, sans-serif;
font-size: 18px;
color:red;
} 		<p class="sample" lang="en">English</span>

English
French p.sample:lang(fr) {
font-family: verdana, sans-serif;
font-size: 22px;
color:# blue;
} 		<p class="sample" lang="fr">Français</p>

Français
Chinese Simplified p.sample:lang(zh-Hans) {
font-family: Simsun;
font-size: 24px;
color:#990000;
} 		<p class="sample" lang="zh-Hans">汉语</p>

汉语
Chinese Traditional p.sample:lang(zh-Hant) {
font-family: Simsun;
font-size: 24px;
color:#000;
} 		<p class="sample" lang="zh-Hant">漢語</p>

漢語
W3C's Resources for language attributes: Styling using language attributes
Internationalization techniques: Authoring HTML & CSS
Language information and text direction